<template>
  <div class="content">
    <div class="main">
      <div class="title">
        <span>{{ obj.shopName }}</span
        ><span>{{ obj.good_describe }}</span>
      </div>
      <div class="price">￥{{ obj.price }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      require: true,
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  box-sizing: border-box;
  margin: 0.5rem /* 8/16 */ auto;
  padding: 0.625rem /* 10/16 */ 0.625rem /* 10/16 */;
  width: 95%;
  height: 12.5rem /* 200/16 */;
  background-color: #fff;
  border-radius: 0.75rem /* 12/16 */;
  .main {
    span:nth-child(1) {
      font-size: 1.25rem /* 20/16 */;
    }
    span:nth-child(2) {
      font-size: 1rem /* 16/16 */;
    }

    .price {
      width: 100%;
      font-size: 1.4375rem /* 23/16 */;
      color: red;
    }
  }
}
</style>
